<template>
  <view
    scroll-y="true"
    :class="view + ' wrap ' + (isIPX ? 'scroll_view_X' : '')"
    @tap="onTap"
    upper-threshold="-50"
    :scroll-into-view="toView"
  >
    <view
      class="message"
      v-for="item in chatMsg"
      :key="item.mid"
      :id="item.mid"
    >
      <!-- <view class="time">
				<text class="time-text">{{ item.time }}</text>
      </view>-->
      <view class="main" :class="item.style">
        <view class="user">
          <!-- yourname：就是消息的 from -->
          <text class="user-text">{{
            item.style == "self"
              ? item.yourname
              : username.name + " " + item.time
          }}</text>
        </view>
        <image
          class="avatar"
          v-if="item.chatType == 'chat'"
          :src="L_header_img"
        />
        <image class="avatar" v-else :src="header_img" />
        <view class="msg" v-if="JSON.stringify(item.msg.ext) == '{}'">
          <image
            class="err"
            :class="item.style == 'self' && item.isFail ? 'show' : 'hide'"
            src="/static/images/msgerr.png"
          />

          <image
            v-if="item.style == 'self'"
            src="/static/images/poprightarrow2x.png"
            class="msg_poprightarrow"
          />
          <image
            v-if="item.style == ''"
            src="/static/images/popleftarrow2x.png"
            class="msg_popleftarrow"
          />
          <view v-if="item.msg.type == 'img' || item.msg.type == 'video'">
            <image
              v-if="item.msg.type == 'img'"
              class="avatar"
              :src="item.msg.data"
              style="width: 90px; height: 120px; margin: 2px auto"
              mode="aspectFit"
              @tap="previewImage"
              :data-url="item.msg.data"
            />
            <!-- <video v-if="item.msg.type == 'video'" :src="item.msg.data" controls style="width:300rpx;"/> -->
          </view>
          <audio-msg v-if="item.msg.type == 'audio'" :msg="item"></audio-msg>
          <view v-else-if="item.msg.type == 'txt' || item.msg.type == 'emoji'">
            <view
              class="template"
              v-for="(d_item, d_index) in item.msg.data"
              :key="d_index"
            >
              <text
                :data-msg="item"
                @tap="clickMsg"
                v-if="d_item.type == 'txt'"
                class="msg-text"
                style="float: left"
                selectable="true"
                >{{ d_item.data }}</text
              >

              <image
                v-if="d_item.type == 'emoji'"
                class="avatar"
                :src="'/static/images/faces/' + d_item.data"
                style="
                  width: 25px;
                  height: 25px;
                  margin: 0 0 2px 0;
                  float: left;
                "
              />
            </view>
          </view>
        </view>
        <view class="msg msg2" v-else @click.stop="shareHouse(item.msg.ext)">
          <view class="msg2Name">{{ item.msg.ext.name }}</view>
          <image :src="item.msg.ext.image" mode="widthFix" width="100%" />
        </view>
      </view>
    </view>
  </view>
</template>


<script>
let msgStorage = require("../msgstorage");
let disp = require("../../../utils/broadcast");
let LIST_STATUS = {
  SHORT: "scroll_view_change",
  NORMAL: "scroll_view",
};
let page = 0;
let Index = 0;
let curMsgMid = "";
let isFail = false;
import audioMsg from "./type/audio/audio";

export default {
  data() {
    return {
      view: LIST_STATUS.NORMAL,
      toView: "",
      chatMsg: [],
      __visibility__: false,
      isIPX: false,
      header_img: uni.getStorageSync("imData").header_img,
    };
  },

  components: {
    audioMsg,
  },
  props: {
    username: {
      type: Object,
      default: () => ({}),
    },
    L_header_img: {
      type: String,
    },
  },

  // lifetimes
  created() {
    setTimeout(() => {
      console.log(this.chatMsg);
    }, 3000);
  },

  beforeMount() {
    this.__visibility__ = true;
    page = 0;
    Index = 0;
  },

  moved() {},

  destroyed() {
    this.__visibility__ = false;
    msgStorage.off("newChatMsg", this.dispMsg);
  },

  mounted(event) {
    let me = this;
    if (getApp().globalData.isIPX) {
      // this.setData({
      this.isIPX = true;
      // });
    }

    this.username = uni.username;
    let username = this.username;
    let myUsername = uni.getStorageSync("myUsername");
    let sessionKey = username.groupId
      ? username.groupId + myUsername
      : username.your + myUsername;
    let chatMsg = uni.getStorageSync(sessionKey) || [];
    this.renderMsg(null, null, chatMsg, sessionKey);
    uni.setStorageSync(sessionKey, null);
    disp.on("em.error.sendMsgErr", function (err) {
      // curMsgMid = err.data.mid;
      isFail = true;
      // return;
      console.log("发送失败了");
      return;
      let msgList = me.chatMsg;
      msgList.map((item) => {
        if (
          item.mid.substring(item.mid.length - 10) ==
          curMsgMid.substring(curMsgMid.length - 10)
        ) {
          item.msg.data[0].isFail = true;
          item.isFail = true;
          me.setData({
            chatMsg: msgList,
          });
        }
      });

      // if (me.curChatMsg[0].mid == curMsgMid) {
      //   me.curChatMsg[0].msg.data[0].isShow = false;
      //   me.curChatMsg[0].isShow = false;
      // }

      uni.setStorageSync("rendered_" + sessionKey, msgList);
    });
    msgStorage.on("newChatMsg", this.dispMsg);
  },

  methods: {
    //用户点击
    shareHouse(data) {
		console.log(data)
		debugger
      if (data.type == 1) {
        this.jumpLink({
          link: "/pages/particulars/index",
          query: { id: data.id, type:1}
        });
      }
      if (data.type == 2) {
        this.jumpLink({
          link: "/pages/particulars/index",
          query: { id: data.id, type:2 }
        });
      }
	  if(data.type=="新房"){
		  this.jumpLink({
		    link: "/pages/newhouse/index",
		    query: { id: data.id }
		  });
	  }
    },
    normalScroll() {
      // this.setData({
      this.view = LIST_STATUS.NORMAL;
      // });
    },
    dispMsg(renderableMsg, type, curChatMsg, sesskey) {
      let me = this;
      let username = this.username;
      let myUsername = uni.getStorageSync("myUsername");
      let sessionKey = username.groupId
        ? username.groupId + myUsername
        : username.your + myUsername;
      me.curChatMsg = curChatMsg;

      if (!me.__visibility__) return; // 判断是否属于当前会话

      if (username.groupId) {
        // 群消息的 to 是 id，from 是 name
        if (
          renderableMsg.info.from == username.groupId ||
          renderableMsg.info.to == username.groupId
        ) {
          if (sesskey == sessionKey) {
            me.renderMsg(renderableMsg, type, curChatMsg, sessionKey, "newMsg");
          }
        }
      } else if (
        renderableMsg.info.from == username.your ||
        renderableMsg.info.to == username.your
      ) {
        if (sesskey == sessionKey) {
          me.renderMsg(renderableMsg, type, curChatMsg, sessionKey, "newMsg");
        }
      }
    },
    shortScroll() {
      // this.setData({
      this.view = LIST_STATUS.SHORT;
      // });
    },

    onTap() {
      this.$emit("msglistTap", null, {
        bubbles: true,
      });
    },

    previewImage(event) {
      var url = event.target.dataset.url;
      uni.previewImage({
        urls: [url], // 需要预览的图片 http 链接列表
      });
    },

    getHistoryMsg() {
      let me = this;
      let username = this.username;
      let myUsername = uni.getStorageSync("myUsername");
      let sessionKey = username.groupId
        ? username.groupId + myUsername
        : username.your + myUsername;
      let historyChatMsgs = uni.getStorageSync("rendered_" + sessionKey) || [];

      if (Index < historyChatMsgs.length) {
        let timesMsgList = historyChatMsgs.slice(-Index - 10, -Index);
        // this.setData({
        (this.chatMsg = timesMsgList.concat(me.chatMsg)),
          (this.toView = timesMsgList[timesMsgList.length - 1].mid);
        // });
        Index += timesMsgList.length;

        if (timesMsgList.length == 10) {
          page++;
        }

        uni.stopPullDownRefresh();
      }
    },

    renderMsg(renderableMsg, type, curChatMsg, sessionKey, isnew) {
      let me = this;

      var historyChatMsgs = uni.getStorageSync("rendered_" + sessionKey) || [];

      historyChatMsgs = historyChatMsgs.concat(curChatMsg);

      if (!historyChatMsgs.length) return;

      if (isnew == "newMsg") {
        // this.setData({
        (this.chatMsg = this.chatMsg.concat(curChatMsg)),
          // 跳到最后一条
          (this.toView = historyChatMsgs[historyChatMsgs.length - 1].mid);
        // });
      } else {
        // this.setData({
        (this.chatMsg = historyChatMsgs.slice(-10)),
          // 跳到最后一条
          (this.toView = historyChatMsgs[historyChatMsgs.length - 1].mid);
        // });
      }

      uni.setStorageSync("rendered_" + sessionKey, historyChatMsgs);
      let chatMsg = uni.getStorageSync(sessionKey) || [];
      chatMsg.map(function (item, index) {
        curChatMsg.map(function (item2, index2) {
          if (item2.mid == item.mid) {
            chatMsg.splice(index, 1);
          }
        });
      });
      uni.setStorageSync(sessionKey, chatMsg);
      Index = historyChatMsgs.slice(-10).length;
      // setTimeout 兼容支付宝小程序
      setTimeout(() => {
        uni.pageScrollTo({
          scrollTop: 5000,
          duration: 300,
          fail: (e) => {
            //console.log('滚失败了', e)
          },
        });
      }, 100);

      if (isFail) {
        this.renderFail(sessionKey);
      }
    },

    renderFail(sessionKey) {
      let me = this;
      let msgList = me.chatMsg;
      msgList.map((item) => {
        if (
          item.mid.substring(item.mid.length - 10) ==
          curMsgMid.substring(curMsgMid.length - 10)
        ) {
          item.msg.data[0].isFail = true;
          item.isFail = true;
          me.setData({
            chatMsg: msgList,
          });
        }
      });

      if (me.curChatMsg[0].mid == curMsgMid) {
        me.curChatMsg[0].msg.data[0].isShow = false;
        me.curChatMsg[0].isShow = false;
      }

      uni.setStorageSync("rendered_" + sessionKey, msgList);
      isFail = false;
    },

    clickMsg(event) {
      if (
        typeof event.target.dataset.msg == "object" &&
        event.target.dataset.msg.msg.ext &&
        event.target.dataset.msg.msg.ext.msg_extension
      ) {
        debugger;
        this.$emit("clickMsg", event.target.dataset.msg.msg.ext);
      }
    },
  },
};
</script>
<style>
@import "./msglist.css";
</style>